<template>
    <div class="board-content">
        <div class="board-body">
            <div class="board-header">
                <div class="board-title">
                    {{ title }}
                </div>
            </div>
            <div class="board-main">
                <div class="board-handle">
                    <div class="board-button">
                        <el-button type="warning" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>

                    </div>
                    <div class="board-search">
                        <div class="search-item" style="width: 120px">
                            <el-select v-model="params.street" size="medium" filterable @change="list">
                                <el-option :value="0" label="全部街道"></el-option>
                                <el-option
                                    v-for="(item,key) in searchData.streets"
                                    :key="key"
                                    :label="item"
                                    :value="Number(key)">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="search-item" style="width: 120px">
                            <el-select v-model="params.uid" size="medium" filterable @change="list">
                                <el-option :value="0" label="全部人员"></el-option>
                                <el-option
                                    v-for="(item,key) in searchData.users"
                                    :key="key"
                                    :label="item.username"
                                    :value="Number(item.id)">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="search-item">
                            <el-input v-model="params.kwd" placeholder="请输入用社区或者小区名称" size="medium" clearable
                                      @input="search()">
                            </el-input>
                        </div>
                        <div class="search-item">
                            <el-button type="primary" icon="fa fa-sort-amount-asc" @click="open()" size="medium"> 更多筛选</el-button>
                        </div>
                    </div>
                </div>
                <el-table element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          v-loading="loading"
                          :data="listData.data" border>
                    <el-table-column prop="id" label="编号" width="65" align="center"></el-table-column>
                    <el-table-column prop="user.username" label="录入者" width="100"></el-table-column>
                    <el-table-column prop="street_text" label="乡镇街道" width="100"></el-table-column>
                    <el-table-column prop="community" label="社区" width="150"></el-table-column>
                    <el-table-column prop="village" label="小区" width="150"></el-table-column>
                    <el-table-column prop="building" label="楼栋" width="150"></el-table-column>
                    <el-table-column prop="name" label="高层建筑名称" width="150"></el-table-column>
                    <el-table-column prop="p_person" label="排查人" width="150"></el-table-column>
                    <el-table-column prop="p_time" label="排查时间" width="150"></el-table-column>
                    <el-table-column prop="created_at" label="创建时间" width="160">
                        <template slot-scope="scope">
                            {{ $moment(scope.row.created_at).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" min-width="270">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="fa fa-eye" size="mini" plain @click="show(scope.row.id)"> 详情
                            </el-button>
                            <el-button type="info" icon="fa fa-trash" size="mini" plain @click="destroy(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="board-pagination">
                    <div class="board-count">总共 <em> {{ listData ? listData.total : 0 }} </em> 条记录</div>
                    <el-pagination v-if="listData.last_page > 1"
                                   :total="listData.total"
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   background
                                   :current-page="listData.current_page"
                                   @current-change="page">
                    </el-pagination>
                </div>
                <div v-if="counts">
                    <div style="color: red;margin-bottom: 10px;font-size: 16px;font-weight: 700">隐患统计:</div>
                    <div class="c_item">无大修基金情况：{{ counts.fund_count }}条({{ ((counts.fund_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">存在可燃雨棚：{{ counts.rainshed_count }}条({{ ((counts.rainshed_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
<!--                    <div class="c_item">存在违规设置突出外墙防护网现象：{{ counts.hidden14_count }}条({{ ((counts.hidden14_count/counts.total_count)*100).toFixed(0) + '%' }})</div>-->
                    <div class="c_item">存在电动自行车违规停放充电现象：{{ counts.bicycle_count }}条({{ ((counts.bicycle_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">消防车道、消防车救援场地未按要求设置标志标牌、施划标线：{{ counts.sign_count }}条({{ ((counts.sign_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">消防车通道情况隐患：{{ counts.channel_count }}条({{ ((counts.channel_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">建筑内疏散通道、安全出口隐患：{{ counts.speak_count }}条({{ ((counts.speak_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">人员密集场所室内采易燃可燃材料装修：{{ counts.hidden1_count }}条({{ ((counts.hidden1_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">违规设置群租房：{{ counts.hidden2_count }}条({{ ((counts.hidden2_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">搭建易燃可燃彩钢板：{{ counts.hidden3_count }}条({{ ((counts.hidden3_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">避难层（间）被占用或擅自改变用途：{{ counts.hidden4_count }}条({{ ((counts.hidden4_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">违规储存、经营、使用易燃易爆危险品：{{ counts.hidden5_count }}条({{ ((counts.hidden5_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">电气线路私拉乱接：{{ counts.hidden6_count }}条({{ ((counts.hidden6_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">电缆井内电气线路敷设不符合规范：{{ counts.hidden7_count }}条({{ ((counts.hidden7_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">防火封堵、被破坏：{{ counts.hidden8_count }}条({{ ((counts.hidden8_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">违规使用瓶装液化气石油气：{{ counts.hidden9_count }}条({{ ((counts.hidden9_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">燃气管线用具敷设安装不规范：{{ counts.hidden10_count }}条({{ ((counts.hidden10_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">消防控制室值班人员配备不到位：{{ counts.hidden11_count }}条({{ ((counts.hidden11_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">影响灭火救援的装饰、广告牌：{{ counts.hidden12_count }}条({{ ((counts.hidden12_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">配建车库违规改变使用功能：{{ counts.hidden13_count }}条({{ ((counts.hidden13_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                    <div class="c_item">其他隐患：{{ counts.hidden14_count }}条({{ ((counts.hidden14_count/counts.total_count)*100).toFixed(0) + '%' }})</div>
                </div>
                <el-dialog fullscreen :close-on-click-modal="false"
                           :close-on-press-escape="false"
                           :title="dialog.title"
                           :visible.sync="dialog.show" center>
                    <el-form :model="params" ref="form" class="dialog-form" label-width="340px">
                        <el-form-item label="有无维保单位：">
                            <el-radio-group v-model="params.maintenance" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(maintenance,k) in searchData.maintenances" :key="k" border>{{ maintenance }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="大修基金情况：">
                            <el-radio-group v-model="params.fund" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(fund,k) in searchData.funds" :key="k" border>{{ fund }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否存在可燃雨棚：">
                            <el-radio-group v-model="params.rainshed" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(rainshed,k) in searchData.rainsheds" :key="k" border>{{ rainshed }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否存在违规设置突出外墙防护网现象：">
                            <el-radio-group v-model="params.wall" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(wall,k) in searchData.walls" :key="k" border>{{ wall }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否存在电动自行车违规停放充电现象：">
                            <el-radio-group v-model="params.bicycle" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(bicycle,k) in searchData.bicycles" :key="k" border>{{ bicycle }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="消防车道、消防车救援场地是否按要求设置标志标牌、施划标线：">
                            <el-radio-group v-model="params.sign" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(sign,k) in searchData.signs" :key="k" border>{{ sign }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="消防车通道情况：">
                            <el-radio-group v-model="params.channel" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(channel,k) in searchData.channels" :key="k" border>{{ channel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="建筑内疏散通道、安全出口：">
                            <el-radio-group v-model="params.speak" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(speak,k) in searchData.speaks" :key="k" border>{{ speak }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="人员密集场所室内采易燃可燃材料装修：">
                            <el-radio-group v-model="params.hidden1" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden1,k) in searchData.hidden1s" :key="k" border>{{ hidden1 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="违规设置群租房：">
                            <el-radio-group v-model="params.hidden2" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden2,k) in searchData.hidden2s" :key="k" border>{{ hidden2 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="搭建易燃可燃彩钢板：">
                            <el-radio-group v-model="params.hidden3" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden3,k) in searchData.hidden3s" :key="k" border>{{ hidden3 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="避难层（间）被占用或擅自改变用途：">
                            <el-radio-group v-model="params.hidden4" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden4,k) in searchData.hidden4s" :key="k" border>{{ hidden4 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="违规储存、经营、使用易燃易爆危险品：">
                            <el-radio-group v-model="params.hidden5" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden5,k) in searchData.hidden5s" :key="k" border>{{ hidden5 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="电气线路私拉乱接：">
                            <el-radio-group v-model="params.hidden6" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden6,k) in searchData.hidden6s" :key="k" border>{{ hidden6 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="电缆井内电气线路敷设不符合规范：">
                            <el-radio-group v-model="params.hidden7" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden7,k) in searchData.hidden7s" :key="k" border>{{ hidden7 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="防火封堵 被破坏：">
                            <el-radio-group v-model="params.hidden8" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden8,k) in searchData.hidden8s" :key="k" border>{{ hidden8 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="违规使用瓶装液化气石油气：">
                            <el-radio-group v-model="params.hidden9" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden9,k) in searchData.hidden9s" :key="k" border>{{ hidden9 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="燃气管线用具敷设安装不规范：">
                            <el-radio-group v-model="params.hidden10" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden10,k) in searchData.hidden10s" :key="k" border>{{ hidden10 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="消防控制室值班人员配备不到位：">
                            <el-radio-group v-model="params.hidden11" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden11,k) in searchData.hidden11s" :key="k" border>{{ hidden11 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="影响灭火救援的装饰、广告牌：">
                            <el-radio-group v-model="params.hidden12" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden12,k) in searchData.hidden12s" :key="k" border>{{ hidden12 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="配建车库违规改变使用功能：">
                            <el-radio-group v-model="params.hidden13" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden13,k) in searchData.hidden13s" :key="k" border>{{ hidden13 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否存在其他隐患：">
                            <el-radio-group v-model="params.hidden14" size="medium">
                                <el-radio :label="0" border>全部</el-radio>
                                <el-radio :label="Number(k)" v-for="(hidden14,k) in searchData.hidden14s" :key="k" border>{{ hidden14 }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="search">搜 索</el-button>
                    <el-button @click="dialog.show = false">关 闭</el-button>
                </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";
import {ArticleList, ArticleDestroy, ArticleCount} from '../../utils/request';

export default {
    computed: {
        ...mapState({
            title: state => state.title,
        }),
    },
    data: function () {
        return {
            loading: false,
            listData: [],
            params: {page: 1, street: 0, uid: 0, kwd: '', maintenance: 0, fund: 0, rainshed: 0, wall: 0, bicycle: 0, sign: 0,
                channel: 0, speak: 0, hidden1: 0, hidden2: 0, hidden3: 0, hidden4: 0, hidden5: 0, hidden6: 0, hidden7: 0,
                hidden8: 0, hidden9: 0, hidden10: 0, hidden11: 0, hidden12: 0, hidden13: 0, hidden14: 0, hidden15: 0},
            counts: null,
            dialog: {title: '', show: false},
            searchData: [],
        }
    },
    activated() {
        this.list();
    },
    methods: {
        count(){
            ArticleCount(this.params).then((res) => {
                if (res.status) {
                    this.$func.error(res.message);
                } else {
                    this.counts = res.data;
                }
                this.loading = false;
            }).catch((e) => {
                this.loading = false;
            });
        },
        list() {
            this.loading = true;
            ArticleList(this.params).then((res) => {
                if (res.status) {
                    this.$func.error(res.message);
                } else {
                    this.listData = res.data.lists;
                    this.searchData = res.data.search;
                }
                this.loading = false;
            }).catch((e) => {
                this.loading = false;
            });
            this.count();
        },
        show(id) {
            this.$router.push({name: 'info', query: {id: id}});
        },
        destroy(id) {
            this.$confirm('您确定要删除选中的该条信息吗？', '提示', {
                type: 'warning',
                confirmButtonText: '确 定',
                cancelButtonText: '取 消'
            }).then(() => {
                ArticleDestroy({id: id}).then((res) => {
                    if (res.status) {
                        this.$func.error(res.message);
                    } else {
                        this.list();
                    }
                });
            }).catch(() => {
            });
        },
        search(){
            this.params.page = 1;
            this.list();
            this.dialog.show = false;
        },
        open() {
            this.dialog.title = '筛选';
            this.dialog.show = true;
            this.$nextTick(()=>{
                this.$refs['form'].clearValidate();
            });
        },
        page(val) {
            this.params.page = val;
            this.list();
        },
    }
}
</script>
<style>
    .c_item{
        margin-top: 5px;
    }
</style>
